﻿<!DOCTYPE html>
<html>
<head>
<!--
  Copyright (c) 2013 Jean-Marc VIGLINO,
  released under the Beerware license (http://fr.wikipedia.org/wiki/Beerware).
-->
  <title>ol-ext: ol control profil</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <meta name="description" content="A profil control for OL3 that draw a profil of a 3D lineString." />
  <meta name="keywords" content="ol3, profil, control, 3D, Z, altitude, GPX, GPS" />

  <!-- jQuery -->
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

  <!-- Openlayers -->
  <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />
  <script type="text/javascript" src="https://openlayers.org/en/latest/build/ol.js"></script>
  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

  <!-- ol-ext -->
  <link rel="stylesheet" href="../../dist/ol-ext.css" />
  <script type="text/javascript" src="../../dist/ol-ext.js"></script>

  <link rel="stylesheet" href="../style.css" />
  <style>
    /* Hide info for profil on map */
    .ol-control.ol-profil table {
      display: none;
    }
    /* Customize cursor color */
    .options .ol-profilbar, .options .ol-profilcursor::before {
      background-color: blue;
    }
  </style>
  </head>
<body >
  <a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>

  <a href="../../index.html">
    <h1>ol-ext: ol control profil</h1>
  </a>
  <div class="info">
    <i>ol.control.Profil</i> is a control that draw a profil of a 3D lineString 
    (with a XYZ or XYZM layout).
    <br/>
    The control can be drawn inside or outside the map.
    <br/>
    It fires an <i>over</i> and <i>out</i> event with informations on the point of the profil 
    that is pointed by the mouse (to show the point on the map).
    <ul>
      <li>
        <i>graduation</i> option let you specify the z axis graduation interval
      </li>
      <li>
        <i>zmin</i> option let you specify the z axis origin
      </li>
      <li>
        <i>zmax</i> option let you specify the z axis maximum
      </li>
      <li>
        <i>amplitude</i> option let you specify the alitude amplitude
      </li>
      <li>
        The <i>popup</i> function lets you show a popup when cursor fly over the profil.
      </li>
    </ul>
  </div>

  <!-- DIV pour la carte -->
  <div id="map" style="width:600px; height:400px;"></div>

  <div class="options">
    <h2>Options:</h2>
    <a target="_new" download="profil.png" class="btn" onclick="this.setAttribute('href',profil2.getImage());">Export PNG</a>
    <a target="_new" download="profil.png" class="btn" onclick="profil.toggle();">Toggle profile (programatically)</a>
  </div>

  <script type="text/javascript">
  // Layers
  var layer = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) });

  // The map
  var map = new ol.Map({
    target: 'map',
    view: new ol.View({
      zoom: 13,
      center: [649083, 5408224]
    }),
    layers: [layer]
  });

  // New profil in the map
  var profil = new ol.control.Profil();
  map.addControl(profil);
  // New profil outside the map
  var profil2 = new ol.control.Profil({
    target: document.querySelector(".options"),
    style: new ol.style.Style({
      fill: new ol.style.Fill({ color: '#ccc' })
    }),
    width:400, height:200
  });
  map.addControl(profil2);

  // Vector style
  var style = [	
    new ol.style.Style({
      image: new ol.style.RegularShape({
        radius: 10,
        radius2: 5,
        points: 5,
        fill: new ol.style.Fill({ color: 'blue' })
      }),
      stroke: new ol.style.Stroke({
        color: [0,0,255],
        width: 2
      }),
      fill: new ol.style.Fill({
        color: [0,0,255,0.3]
      })
    })
  ];

  // Vector layer
  var source = new ol.source.Vector({
    //url: '../data/192553.gpx',
    url: '../data/2009-09-04_rando.gpx',
    format: new ol.format.GPX()
  });
  var vector = new ol.layer.Vector({
    source: source,
    style: style
  });
  map.addLayer(vector);

  // Show feature profile when loaded
  var pt, feature;
  source.once('change',function(e) {
    if (source.getState() === 'ready') {
      feature = source.getFeatures()[0];
      profil.setGeometry(feature);
      profil2.setGeometry(feature, {
        graduation:250,
        amplitude:1000,
        zmin:0
      });
      pt = new ol.Feature(new ol.geom.Point([0,0]));
      pt.setStyle([]);
      source.addFeature(pt);
    }
  });

  // Draw a point on the map when mouse fly over profil
  function drawPoint(e) {
    if (!pt) return;
    if (e.type=="over"){
      // Show point at coord
      pt.setGeometry(new ol.geom.Point(e.coord));
      pt.setStyle(null);
    } else {
      // hide point
      pt.setStyle([]);
    }
  };
  // Show a popup on over
  profil.on(["over","out"], function(e) {
    if (e.type=="over") profil.popup(e.coord[2]+" m");
    drawPoint(e);
  });
  // Just draw point
  profil2.on(["over","out"], drawPoint);

  // Show on map over
  var hover = new ol.interaction.Hover({ cursor: "pointer", hitTolerance:10 });
  map.addInteraction(hover);
  hover.on("hover", function(e) {
    // Point on the line
    var c = feature.getGeometry().getClosestPoint(e.coordinate)
    drawPoint({ type: "over", coord: c });
    // Show profil
    var p = profil.showAt(e.coordinate);
    profil.popup(p[2]+" m");
    profil2.showAt(e.coordinate);
  });
  hover.on("leave", function(e) {
    profil.popup();
    profil.showAt();
    profil2.showAt();
    drawPoint({});
  });
  </script>
  
</body>
</html>